<template>
  <div class="container">
    <el-form ref="form" :model="myInfo" label-width="70px">
      <el-form-item label="个人信息" class="title"> </el-form-item>
      <el-form-item label="用户昵称">
        <el-input
          v-model="myInfo.nickName"
          :disabled="role == 'admin'"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="myInfo.userName" disabled></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="myInfo.password"
          :disabled="role == 'admin'"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
          v-model="checkPsd"
          :disabled="role == 'admin'"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="myInfo.sex" placeholder="请选择性别">
          <el-option
            v-for="(item, index) in ['男', '女']"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职位">
        <el-select
          v-model="myInfo.position"
          placeholder="清选择职位"
          :disabled="role == 'admin'"
        >
          <el-option
            v-for="(item, index) in positionList"
            :key="index"
            :label="item.position"
            :value="item.position"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像">
        <course-image v-model="myInfo.userImg" :limit="5"></course-image>
      </el-form-item>
      <el-form-item class="sub">
        <el-button type="primary" @click="onSubmit">修改信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getPositionList } from "@/services/userManager";
import { setAdminInfo, getAdminInfo } from "@/services/myInfo";
import CourseImage from "./components/CourseImage";

export default {
  name: "AdvertIndex",
  components: {
    CourseImage,
  },
  data() {
    return {
      id: JSON.parse(localStorage.getItem("userInfo")).id,
      role: localStorage.getItem("userRole"),
      myInfo: {
        userName: "",
        password: "",
        sex: "男",
        position: "",
        userImg: "",
      },
      positionList: [],
      checkPsd: "",
    };
  },
  created() {
    this.loadPosistionAll();
    this.loadMyInfo();
  },
  methods: {
    // 获取所有菜单信息
    async loadMyInfo() {
      const { data } = await getAdminInfo({ id: this.id });
      if (data.data) {
        this.myInfo = data.data;
        this.myInfo.password = "";
      }
    },
    async onSubmit() {
      if (this.checkPsd !== this.myInfo.password) {
        this.$message.warning("两次密码输入不同！");
        return;
      }
      var { data } = await setAdminInfo(this.myInfo);
      if (data.msg == "用户名已被占用，换个试试！") {
        this.$message.success(data.msg);
      } else {
        this.$message.success(data.msg);
        this.loadMyInfo();
      }
    },
    async loadPosistionAll() {
      const { data } = await getPositionList();
      this.positionList = data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: white;
  height: calc(100vh - 100px);
  min-height: 600px;
  padding-top: 10px;
  .el-form {
    width: 30%;
    margin: 30px 30px;
    margin-top: 0;
    ::v-deep .el-form-item__label {
      text-align-last: justify;
    }
    .title {
      ::v-deep .el-form-item__label {
        font-weight: bold;
        font-size: 18px;
        width: 100px !important;
        text-align-last: left;
      }
    }
    ::v-deep .el-form-item__content {
      > div {
        width: 100%;
      }
    }
    .sub {
      ::v-deep .el-form-item__content {
        display: flex;
        // justify-content: space-between;
        .el-button {
          width: 200px;
        }
      }
    }
  }
}
</style>

